<body>
<div class="container">
<div class="row" style="margin-top: 10%; margin-bottom: 10%;">
    <div class="col-lg-4 col-xs-12"></div>
    <div class="col-lg-4 col-xs-12" style="border: 1px solid #F36F00;">
        <div class="row" style="background-color: orange; font-weight: bolder; font-size: 20px; padding: 10px; color: white; text-align: center"><span style="padding: 20px">CÀI ĐẶT MẬT KHẨU MỚI</span></div>
        <div class="row" style="margin: 10px;">
            <p style="font-weight: bold">Mật khẩu mạnh là mật khẩu bao gồm các chữ cái và dấu chấm câu. Nó phải có ít nhất 6 ký tự.</p>
            <p><i>(ví dụ: 4pRte!ai@3)</i></p>
        </div>
        <div class="input-group" style="margin: 5px;">
            <span class="input-group-addon">Mật khẩu mới &nbsp &nbsp &nbsp&nbsp &nbsp</span>
            <input type="password" class="form-control" id="txtNewPass">
        </div>
        <div class="row">
            <div class="col-lg-5">
                <span style="padding: 5px; margin: 5px;">Độ mạnh: </span>
            </div>
            <div class="col=lg-7" id="strength_human"></div>
        </div>
        <div class="input-group" style="margin: 5px;">
            <span class="input-group-addon">Xác nhận mật khẩu </span>
            <input type="password" class="form-control" id="txtReNewPass">
        </div>
        <div class="row" style="text-align: center; color: darkgreen; margin: 5px;" id="divChangePassword"></div>
        <div class="row" style="margin: 20px; text-align: center">
            <span id="spnChangePassword" style="padding: 10px; width: 500px; background-color: darkorange; color: white; font-size: 18px; cursor: pointer; margin: 20px" onclick="checkPass()">Tiếp tục</span>
        </div>
    </div>
    <div class="col-lg-4 col-xs-12"></div>
</div>
</div>
</body>

<script>
    $(document).ready(function(){
        $(document).bind('keypress', function(e) {
            if(e.keyCode==13){
                checkPass();
            }
        });

        $("#txtNewPass").on("keypress keyup keydown", function() {
            var pass = $(this).val();
            var strength = checkPassStrength(pass);
            if(strength == ""){
                $("#strength_human").html('<p style="color: orange;">'+strength+'</p>');
            }
            if(strength == "yếu"){
                $("#strength_human").html('<p style="color: gray;">'+strength+'</p>');
            }
            if(strength == "tốt"){
                $("#strength_human").html('<p style="color: blue;">'+strength+'</p>');
            }
            if(strength == "mạnh"){
                $("#strength_human").html('<p style="color: green;">'+strength+'</p>');
            }
        });
    });

    function scorePassword(pass) {
        var score = 0;
        if (!pass)
            return score;

        // award every unique letter until 5 repetitions
        var letters = new Object();
        for (var i=0; i<pass.length; i++) {
            letters[pass[i]] = (letters[pass[i]] || 0) + 1;
            score += 5.0 / letters[pass[i]];
        }

        // bonus points for mixing it up
        var variations = {
            digits: /\d/.test(pass),
            lower: /[a-z]/.test(pass),
            upper: /[A-Z]/.test(pass),
            nonWords: /\W/.test(pass)
        }

        variationCount = 0;
        for (var check in variations) {
            variationCount += (variations[check] == true) ? 1 : 0;
        }
        score += (variationCount - 1) * 10;

        return parseInt(score);
    }

    function checkPassStrength(pass) {
        var score = scorePassword(pass);
        if (score > 80)
            return "mạnh";
        if (score > 60)
            return "tốt";
        if (score >= 30)
            return "yếu";

        return "";
    }

    function checkPass(){
        $('#divChangePassword').html('');
        var newPass = $('#txtNewPass').val();
        var reNewPass = $('#txtReNewPass').val();
        if(newPass == '' || newPass.length < 6){
            $('#divChangePassword').html("<span style='color: red'>Mật khẩu phải có ít nhất 6 ký tự!</span>");
        }
        else{
            if(newPass != reNewPass){
                $('#divChangePassword').html("<span style='color: red'>Mật khẩu xác nhận không khớp!</span>");
            }
            else{
                var key = "<?php echo $key ?>";
                var url = "<?php echo base_url() ?>";
                var dataString = "newPass="+newPass+"&key="+key;
//                alert(dataString);
                $.ajax({
                    type: "POST",
                    url: url+'users/updatePassword',
                    data: dataString,
                    success: function(x){
//                        alert(x);
                        if(x == 1){
                            $('#spnChangePassword').hide();
                            $('#divChangePassword').html('Cài đặt mật khẩu mới thành công! \nHệ thống đang chuyển về trang chủ hoặc <a href="<?php echo base_url() ?>">[bấm vào đây]</a>');
                            window.setTimeout(function () {
                                location.href = "<?php echo base_url() ?>";
                            }, 5000);
                        }else{
                            $('#divChangePassword').html("<span style='color: red'>"+x+"</span>");
                        }
                    }
                });
            }
        }
    }
</script>